import { defineComponent, PropType, Transition, computed, h } from 'vue';
import uSetupTest from '@/views/main/system/department/uSetupTest.vue';

import './uList.less';

interface Person {
  name: string;
  age: number;
  isShow: boolean;
}

export default defineComponent({
  name: 'uList',

  props: {
    list: {
      type: Array as PropType<Person[]>,
      default: () => [],
    },
  },

  setup(props, ctx) {
    const slots = ctx.slots;

    const { header, default: content } = slots;
    const listInst = computed(() =>
      props.list.map((o) => {
        return (
          <li class="uList-item">
            <span class="header">{header && header(o)}</span>

            <Transition
              leave-active-class="leave-active"
              enter-active-class="enter-active "
            >
              <div v-show={o.isShow}>{content && content(o)}</div>
            </Transition>
          </li>
        );
      })
    );

    return () => (
      <>
        <ul class="uList">{listInst.value}</ul>
        {h(uSetupTest, {
          list: props.list,
        })}
      </>
    );
  },
});
